<!--
 * @Author: wangding
 * @Date: 2020-11-11 11:02:53
 * @LastEditTime: 2020-12-25 13:59:02
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\device\battery\battery.vue
-->
<template>
    <div class="battery-main-box">
        <div class="search-box">
            <div class="search-box-sub">
                <span class="lable-text">{{$t('payConfirm.wifiSN')}}</span>
                <el-input v-big v-model="wifiSn" style="width:160px;" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('opttask.optType')}}</span>
                <el-select v-model="optTypeId" filterable :placeholder="$t('please_choose')" clearable >
                    <el-option
                        v-for="item in dictionary.WIFISN_HISTORY_OPTTYPE"
                        :key="item.value"
                        :label="item.code"
                        :value="item.value">
                    </el-option>
                </el-select>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('wifiSN_history_optUser')}}</span>
                <el-input v-model="optUserName" style="width:160px;" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('wifiSN_history_optFirm')}}</span>
                <el-input v-model="optFirm" style="width:160px;" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('wifiSN_history_terminalUser')}}</span>
                <el-input v-model="terminalUserName" style="width:160px;" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <span class="lable-text">{{$t('site')}}</span>
                <el-input v-model="siteName" style="width:160px;" :placeholder="$t('pleaseInput')"></el-input>
            </div>
            <div class="search-box-sub">
                <el-button type="primary" @click='query'>{{$t('query')}}</el-button>
            </div>
        </div>
        <baseTable v-loading="loading"  row-key='sid' :data="dataRows" border  stripe   :column='column' :select='false' @selection-change="handleSelectionChange($event)">
            <template #optType="{data}">
                {{comm.returnCode(dictionary.WIFISN_HISTORY_OPTTYPE,data.optType)}}
            </template>
        </baseTable>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
        </el-pagination>
    </div>
</template>

<script>
import moment from 'moment'
import baseTable from '../../components/common/baseTable'
export default {
    components: {
        baseTable
    },
    props: {

    },
    data() {
        return {
            wifiSn:'',
            optTypeId:'',
            optUserName:'',
            optFirm:'',
            terminalUserName:'',
            siteName:'',
            current:1,
            size:10,
            total:1,
            loading:false,
            dataRows:[],
            column:[{
                title: this.$t('payConfirm.wifiSN'),
                value: 'wifiSn',
                slot: 'wifiSn'
            },
            {
                title: this.$t('opttask.optType'),
                value: 'optType',
                slot: 'optType'
            },
            {
                title: this.$t('wifiSN_history_optUser'),
                value: 'optUserName',
                slot: 'optUserName'
            },
            {
                title: this.$t('wifiSN_history_optFirm'),
                value: 'optFirm',
                slot: 'optFirm'
            },
            {
                title: this.$t('wifiSN_history_terminalUser'),
                value: 'terminalUserName',
                slot: 'terminalUserName'
            },
                {
                title: this.$t('site'),
                value: 'siteName',
                slot: 'siteName'
            },
            {
                title: this.$t('createTime'),
                value: 'createTime',
                slot: 'createTime'
            }],
            dictionary:{}
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getDictionaryBatch()
        this.wifiHistoryGetPage()
    },
    methods: {
        async getDictionaryBatch(){
            let res = await this.API.getDictionaryBatch({
                dictCodes:'WIFISN_HISTORY_OPTTYPE',
                lang:localStorage.getItem('lang')||'zh_CN'
            })
            this.dictionary = res || {}
        },
        async wifiHistoryGetPage(){
            this.loading = true
            let res = await this.API.wifiHistoryGetPage({
                wifiSn: this.wifiSn,
                optType: this.optTypeId,
                optUserName: this.optUserName,
                optFirm: this.optFirm,
                terminalUserName: this.terminalUserName,
                siteName: this.siteName,
                current: this.current,
                size: this.size
            })
            this.loading = false
            this.total = res.total
            this.dataRows = res.rows
        },
        handleCurrentChange(val) {
          this.current = val
          this.wifiHistoryGetPage()
        },
        handleSizeChange(val) {
          this.size = val
          this.current = 1
          this.wifiHistoryGetPage()
        },
        query(){
            this.current = 1
            this.wifiHistoryGetPage()
        }
    },
};
</script>

<style  lang="less" scoped>
.battery-main-box{
    .hover-a-link:hover{
        text-decoration: underline;
    }
}
</style>
